<!--
 * @Date: 2023-03-20 11:17:48
 * @LastEditTime: 2023-03-20 16:01:30
 * @FilePath: /prepaid-refill/src/views/Market/Market.vue
 * 介绍:市值大厅
-->
<script lang="ts" setup>
import useBalanceStore from "@@/store/useBalanceStore";
import charts from "./components/charts.vue";
import dayAddAddress from "./components/dayAddAddress.vue";
import { formatNumber } from "@@/utils/tools/tools";
import footerVue from "../home/components/footer.vue";
const balanceStore = useBalanceStore();
const { NAC } = storeToRefs(balanceStore);
balanceStore.getGameBalance(NAC.value!);
</script>

<template>
  <div class="market auto-mt-lg">
    <Ccard>
      <div class="header gridVar--col T-S-sm" style="--col: 2">
        <div class="T-A-C">
          <h3>${{ formatNumber(NAC?.price) }}</h3>
          <div>{{ $t("bbc-can-kao-jia-zhi") }}</div>
        </div>
        <div class="T-A-C">
          <h3 style="display: inline">{{ formatNumber(NAC?.ganmeBalance) }}</h3>
          <span>
            ≈ ${{ formatNumber(NAC?.ganmeBalance! * Number(NAC?.price)) }}
          </span>
          <div>{{ $t("bbc-ke-yong-yu-e") }}</div>
        </div>
        <VanButton class="gridCol2 mt-sm" color="var(--C-LG1)">
          {{ $t("jin-ru-jiao-yi-da-ting") }}
        </VanButton>
      </div>
    </Ccard>
    <charts />
    <dayAddAddress />
    <footerVue />
  </div>
</template>

<style lang="less" scoped>
.header {
  padding: var(--gap-md) 0;
  .gridCol2 {
    grid-column: 1 / span 2;
  }
}
</style>
